<template>
	<view class="leesonList padding">
		<view class="publicContent">
			<view class="content_one" v-for="item in moreListData" :key="item.id" @click="gotovideodetail(item.id)">
				<image :src="item.image_url" mode=""></image>
				<view class="others">
					<h3>{{item.name}}</h3>
					<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
					<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
					<view class="content_oneBottom">
						<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
						<view class="bottom_right">
							<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
							<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isover" class="b_bottom text-center" style="padding-bottom: 20rpx;">
				----已经到底了-----
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				value: 3.5,
				department:'',
				moreListData:[],
				page:1,
				total:0,
				isover:false
			}
		},
		onLoad(option) {
			this.department = option.department
			this.getMoreList()
		},
		methods:{
			async getMoreList(){
				let res = await this.$myRuquest({
					url:`/list_courses/?page=${this.page}`,
					data:{department:this.department}
				})
				this.total = res.data.count
				this.moreListData = [...this.moreListData,...res.data.results]
			},
			onReachBottom() {
				if(this.moreListData.length>=this.total) return this.isover = true
				this.page++
				this.getMoreList()
			},
			gotovideodetail(id){
				uni.navigateTo({
				    url: `../videodetail/videodetail?id=${id}`
				});
			},
		}
	}
</script>

<style lang="scss">
.leesonList{
	.publicContent{
		padding: 10rpx 10rpx;
		.content_one{
			display: flex;
			padding: 30rpx 30rpx;
			margin-bottom: 20rpx;
			background: white;
			border-radius: 20rpx;
			image{
				width: 185rpx;
				height: 132rpx;
				border-radius: 15rpx;
			}
			.others{
				width: 565rpx;
				height: 132rpx;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.content_oneBottom{
					display: flex;
					justify-content: space-between;
					.bottom_right{
						padding-left: 50rpx;
					}
				}
			}
		}
	}
}
</style>
